<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<mate name="viewport" content="width=device-width,initial-scale=1.0">
		<title></title>
		<style type="text/css">
			body{
				font-size: 15px;
				background-color: #F6F6F6;
			}
			.meau1{
				visibility: hidden;
			}
			.meau2{
				visibility: hidden;
			}
			.navigation{
				display: flex;
				justify-content: space-between;
				width: 100%;
				height: 35px;
				border-bottom:3px solid steelblue;
				background:linear-gradient(white 60%,#F6F6F6);
				line-height:35px;
			}
			.left-navigation{
				display: flex;
				justify-content: space-between;
				justify-self: start;
				align-self: start;
				
			}
			[id$="color"]{
				margin: 10px 5px 0 0;
				height: 15px;
				width: 15px;
				border: none;
				border-radius: 5px;
				box-shadow: 0 0 2px 0 gray;
			}
			#one-color{
				background-color: #68B9E9;
			}
			#two-color{
				background-color: #B1CDFC;
			}
			#three-color{
				background-color: #89C620;
			}
			#four-color{
				background-color: #A18E70;
			}
			#five-color{
				background-color: #7A66A2;
			}
			#six-color{
				background-color: #E75032;
			}
			#seven-color{
				background-color: #7EA692;
			}
			#eight-color{
				background-color: #C7C7C7;
			}
			.a{
				margin-left: 15px;
			}
			[class$="size"]{
				margin-left: 15px;
				height: 18px;
				text-decoration: underline;
			}
			.active{/* 盒子 */
			width: 800px;
			margin: auto;
			margin-top: 50px;
			}
			.active2{/* 标题 */
				font-size: 30px;
				font-family: "宋体";
				width: 100%;
				text-align: center;
			}
			.active3{/* 内容 */
				font-size: 20px;
				font-family: "宋体";
				text-align: left;
				font-family: "加粗";
				width: 800px;
				text-align: left;
			}
			#screen{
				/* border: none; */
				background: linear-gradient(white,#FAE1C6);
				border-radius: 5px;
			}
			[id$="a"]{
				/* border: none; */
				background: linear-gradient(white,#C5DFFB);
				border-radius: 5px;
			}
			@media screen and (max-device-width: 882px) {
			.navigation{
				visibility: hidden;
			}
			body{
				background-color: #FBE6B5;
				margin: 0;
				padding: 0;
			}
			#top{
			width: 100%;
			text-align: right;
			}
			.active{
			color: #6A482E;
			text-align: center;
			width: 100%;
			}
			.active2{
				padding-top: 90px;
				font-size: 80px;
			}
			.active3{
				text-align: left;
				width: 85%;
				margin: 0 0 0 80px;
			}
			.meau1{
				visibility: initial;
			}
			.meau2{
				visibility: initial;
			}
			.a1{/* 顶端菜单 */
				height: 140px;
				background-color: black;
				width: 100%;
				opacity: 0.8;/* 设置透明度 */
				position: fixed;/* 设置固定位置 */
			}
			.a2{
				width: 250px;
				height: 80px;
				background-color: #000000;
				top: 500px;
				right: 0;
				position: absolute;
				border-top-left-radius: 50px;
				border-bottom-left-radius: 50px;
				color: white;
				font-family: "粗体";
				font-size: 50px;
				padding: 15px;
				opacity: 0.8;/* 设置透明度 */
				position: fixed;/* 设置固定位置 */
			}
			.a3{
				height: 150px;
				width: 150px;
				background-color: #000000;
				border-radius: 50%;
				position: absolute;
				top: 1150px;
				right: 0;
				color: white;
				font-size: 35px;
				text-align: center;
				line-height: 190px;
				opacity: 0.8;/* 设置透明度 */
				position: fixed;;/* 设置固定位置 */
			}
			.a4{/* 底端菜单 */
				height: 350px;
				width: 100%;
				background-color: black;
				opacity: 0.8;
				position: absolute;
				top: 1390px;
				position: fixed;
				color: white;
				font-size: 60px;
				display: grid;
				grid-template-areas: 'a a b b'
									 'c d e f';
				padding: 30px 5px;
			}
			.cd1{
				grid-area: a;
			}
			.cd2{
				grid-area: b;
			}
			.cd3{
				font-size: 45px;
				
			}
		</style>
	</head>
	<body>
		<div class="meau1"><!-- 顶端菜单 -->
			<div class="a1">
				<a></a>
				<a></a>
				<a></a>
				<a></a>
			</div>
			<div id="top">投诉</div>
			<div class="a2">加入书架</div>
		</div>
		<div class="navigation">
			<div class="left-navigation">
				<a>选择背景颜色：</a>
				<input type="button" name="" id="one-color" value="" />
				<input type="button" name="" id="two-color" value="" />
				<input type="button" name="" id="three-color" value="" />
				<input type="button" name="" id="four-color" value="" />
				<input type="button" name="" id="five-color" value="" />
				<input type="button" name="" id="six-color" value="" />
				<input type="button" name="" id="seven-color" value="" />
				<input type="button" name="" id="eight-color" value="" />
				<a class="a">选择字号：</a>
				<a class="veryBig-size">特大</a>
				<a class="big-size">大</a>
				<a class="center-size">中</a>
				<a class="little-size">小</a>
			</div>
			<div class="light-navigation">
				<input type="button" name="" id="screen" value="全屏阅读" />
				<input type="button" name="" id="comment-a" value="评论本章" />
				<input type="button" name="" id="return-a" value="返回目录" />
				<input type="button" name="" id="book-a" value="+书架" />
				<input type="button" name="" id="before-a" value="上一章" />
				<input type="button" name="" id="after-a" value="下一章" />
			</div>
		</div>
		<div class="active">
					<div class="active2"><b>第一章 卧 龙</b></div><br>
					<div class="active3"><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;初平元年，襄阳，晴空万里。</p>
		<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;通往汉水岸边望江亭的大道上，一辆辆的马车络绎不绝，一名名世家子弟们鲜衣怒马，意气风发。</p>
		<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;铛铛铛~~</p>
		<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;清脆的铜铃声响起，华*马丛中，却出现了一辆寒酸的驴车。</p>
		<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;驴车上那少年，身形修长，相貌清瘦，身穿着一身青衫布衣，布衣的颜色隐隐已有些发白，看得出来是洗了又洗，穿了有些年头。</p>
		<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;颠簸的驴车，陈旧的布衣，穿行在周围的鲜衣怒马之中，显的颇为扎眼。</p>
		<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;那些经过的世族子弟们，看向那少年的眼神中，不禁都掠过一丝轻视，甚至是嫌弃的目光。</p>
		<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;驴车上的少年，却旁若无人，手托着腮帮子，悠哉的斜卧在驴车上，嘴里哼着不知名的小曲，不时的往嘴里扔几颗蚕豆，一副旁若无人的样子。
		
		“公子，我听说那刘荆州的这个什么招贤会，说是要唯才是举，挑选有才华的年轻人去新得的南阳郡当县令，其实早就内定了四大家族的子弟，咱还有必要大老远的白跑一趟么？”
		
		赶车的婢女苏小小嘟着小嘴，说起话来吧嗒吧嗒，伶俐的紧，愤愤不平的向身后的布衣公子抱怨。
		
		“你以为我想去么。”苏哲无奈的叹了一声，“若非是水镜老师劝我前去赴会，公子我才懒得去当陪衬。”
		
		说着，苏哲往嘴里又扔了颗蚕豆，嚼的是津津有味。</p>
		<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;哒哒哒~~</p>
		<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;身后响起一阵急促的马蹄声，数骑高头大马，一阵风似的从驴车边飞驰而过，马蹄践起漫天灰尘，惊的拉车毛驴弹起了蹄子来。</p>
		<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;“怎么骑马的，赶着去投胎吗！”苏小小连秀鼻也顾不得捂，双手紧拉缰绳，才稳住了受惊的驴。</p>
		</div>
		<div class="meau2"><!-- 底端菜单 -->
			<div class="a3">写章评</div>
			<div class="a4">
				<a class="cd1">上一章</a>
				<a class="cd2">下一章</a>
				<a class="cd3">目录</a>
				<a class="cd3">黑夜</a>
				<a class="cd3">设置</a>
				<a class="cd3">书评</a>
			</div>
		</div>
		</div>
	</body>
	<script src="jq/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		let flag = 0;
		$('.active').click(function(){
			if(flag==0){
				$('.meau1,.meau2').stop().slideUp();
				flag=1;
			}else{
				$('.meau1,.meau2').stop().slideDown();
				flag=0;
			}
		})
	</script>
</html>
